<template>
    <div>
        <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" />
        <van-search @update:model-value="sss" v-model="value" shape="round" background="#f88" placeholder="请输入搜索关键词" />
        <van-empty image="search" description="搜索为空" v-if="!ss.length"/>
        <van-cell-group v-else>
            <router-link v-for="item in ss" :to="'/detail/' + item.goods_id">
                <van-cell :title="item.goods_name" />
            </router-link>
        </van-cell-group>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from '../request/index'
import _ from 'lodash'
const value = ref('')
const ss = ref([])
const sss = _.debounce((query) => {
    axios.get('https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch', {
        params: {
            query
        }
    }).then(res => {
        ss.value = res.data.message
    })
}, 1000)

</script>

<style lang="scss" scoped></style>